<template>
    <Popup class="select-express" position="bottom" v-model="visiable" get-container="body">
        <SelectModalHeader
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @cancel="hide"
            @ok="ensureSelect"
        />
        <Picker :columns="expressList" @change="onChange" value-key="name" />
    </Popup>
</template>

<script>
import { Picker, Popup } from 'vant';
import { SelectModalHeader } from '@components/biz';
import ModeMixin from '@common/mixin';
export default {
    name: 'SelectExpress', // 选择快递
    mixins: [ModeMixin],
    components: {
        Popup,
        Picker,
        SelectModalHeader,
    },
    props: {
        expressList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            visiable: false,
            selectValue: null,
        };
    },
    methods: {
        show() {
            this.visiable = true;
            this.selectValue = this.$props.expressList[0];
        },
        hide() {
            this.visiable = false;
        },
        ensureSelect() {
            this.$emit('ensure', this.selectValue);
            this.hide();
        },
        onChange(item, value) {
            this.selectValue = value;
        },
    },
};
</script>

<style lang="less" scoped>

</style>
